<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/thesame.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/headCss.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/leftSidebar.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/footer.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/framework/css/rightCon.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/framework/css/tree.css}" media="all">
    <style>
    </style>
</head>

<body class="layui-layout-body">
<div class="layui-body layui-body-pb60px">
    <div class="scroll-box">
        <div class="scroll-box-con">
            <div class="crumbs-nav f14px pb16px">
                <span class="return">组织架构</span>
                <span class="current">编辑</span>
                <!-- <span>党建活动</span>
                 <span>党建活动</span>-->
            </div>
            <div class="border-radius4 bgWhite">
                <div class="f18px pt16px pb16px ml16px mr16px border-bot1px">编辑组织</div>
                <div class="pad16px add-mess form-style">
                    <div class="add-mess-child">
                        <div>
                            <label><em class="red">*</em>组织名称：</label>
                        </div>
                        <!--class="border1px-red"-->
                        <p><input type="text" placeholder="请输入" th:value="${org.name}" autocomplete="off" id="name" maxlength="10" class="border1px"><span id="nm" style="display: none" class="red">组织名称已存在！</span></p>
                    </div>
                    <div id="treeTwo" class="add-mess-child">
                        <div>
                            <label><em class="red">*</em>上级组织：</label>
                        </div>
                        <p class="add-mess-form-tree"><input type="text" th:value="${org.pid}== 0 ? '/':${pOrg.name}" th:data-id="${org.pid}== 0 ? ${org.id}:${pOrg.id}" readonly placeholder="请输入" id="selectedOrg" class="form-select-img border1px"><span id="nm2" style="display: none" class="red">上级组织不能为空！</span>
                        </p>
                        <div class="tree-con-box">
                            <div class="border-bot1px pl16px pr16px lh45px gray cursor" th:onclick="selectOrg(0,'/')"><span class="mr10px">/</span><span>无上级组织</span></div>
                            <ul class="tree-one">
                                <li th:each="orgList : ${orgLists}">
                                    <div class="tree-children">
                                        <div>
                                            <p class="tree-arrow cursor"><img th:if=" ${not #lists.isEmpty(orgList.sysOrganizations)}" th:src="@{/static/framework/img/icon_select_up.png}"></p>
                                            <p th:onclick="selectOrg([[${orgList.id}]],[[${orgList.name}]])">[[${orgList.name}]]</p>
                                        </div>
                                    </div>
                                    <ul class="tree-two" th:if="${not #lists.isEmpty(orgList.sysOrganizations)}" th:each="twoOrgList : ${orgList.sysOrganizations}">
                                        <li>
                                            <div class="tree-children">
                                                <div>
                                                    <p class="tree-arrow cursor"><img th:if=" ${not #lists.isEmpty(twoOrgList.sysOrganizations)}" th:src="@{/static/framework/img/icon_select_up.png}"></p>
                                                    <p th:onclick="selectOrg([[${twoOrgList.id}]],[[${twoOrgList.name}]])">[[${twoOrgList.name}]]</p>
                                                </div>
                                            </div>
                                            <ul class="tree-three" th:if="${not #lists.isEmpty(twoOrgList.sysOrganizations)}" th:each="threeOrgList : ${twoOrgList.sysOrganizations}">
                                                <li>
                                                    <div class="tree-children">
                                                        <div>
                                                            <p class="tree-arrow cursor"><img th:if=" ${not #lists.isEmpty(threeOrgList.sysOrganizations)}" th:src="@{/static/framework/img/icon_select_up.png}"></p>
                                                            <p th:onclick="selectOrg([[${threeOrgList.id}]],[[${threeOrgList.name}]])">[[${threeOrgList.name}]]</p>
                                                        </div>
                                                    </div>
                                                    <ul class="tree-four" th:if="${not #lists.isEmpty(threeOrgList.sysOrganizations)}" th:each="fourOrgList : ${threeOrgList.sysOrganizations}">
                                                        <li>
                                                            <div class="tree-children">
                                                                <div>
                                                                    <p class="tree-arrow"></p>
                                                                    <p th:onclick="selectOrg([[${fourOrgList.id}]],[[${fourOrgList.name}]])">[[${fourOrgList.name}]]</p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="add-mess-child">
                        <div>
                            <label>地址：</label>
                        </div>
                        <p class="width"><textarea th:utext="${org.remark}" name="" maxlength="50" id="remark" cols="5" rows="3"></textarea></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-footer layui-footer-one">
    <div class="btn-con textCenter lh40px">
        <span class="btn-compile" onclick="save()">提&nbsp;交</span>
        <span class="btn-cancel return">返&nbsp;回</span>
    </div>
</div>
<script th:src="@{/static/js/jquery-3.1.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/js/leftSidebar.js}" charset="utf-8"></script>
<script th:src="@{/static/js/selectColor.js}" charset="utf-8"></script>
<script th:src="@{/static/framework/js/treeTwo.js}" charset="utf-8"></script>
<script th:inline="javascript">

    var basePath = [[${#request.getContextPath()}]];

    var id = [[${orgId}]];

    $(function () {

        $(".return").on('click', back);

    });

    //选中组织
    function selectOrg(id, name) {
        $("#selectedOrg").val(name);
        $("#selectedOrg").attr("data-id", id);
        $('#treeTwo .tree-con-box').hide();
    }


    function save() {

        var name = $("#name").val()
        var pid = $("#selectedOrg").attr('data-id');
        var remark = $("#remark").val();

        if (isNull(name)) {
            $("#name").addClass("border1px-red");
            $("#nm").css("display", "");
            $("#nm").text("组织名称不能为空！")
            return;
        }

        if (isNull(pid)) {
            $("#selectedOrg").addClass("border1px-red");
            $("#nm2").css("display", "");
            return;
        }

        var data = {
            name: name, pid: pid, remark: remark, id: id
        }

        $.ajax({
            url: "../organization/update",
            type: "post",
            async: false,
            dataType: "json",
            data: data,
            success: function (result) {
                layui.use('layer', function () {
                    var layer = layui.layer;
                    if (result.code == 0) {
                        layer.msg('添加成功', {icon: 1, time: 1500}, function () {
                            layer.closeAll();
                            window.location.href = "../organization/toSysOrganizationPage";
                        });
                    } else if (result.code == 9001) {
                        $("#name").addClass("border1px-red");
                        $("#nm").css("display", "");
                        $("#nm").text("组织名称已存在！")
                    } else {
                        layer.msg(result.msg)
                    }
                })
            }
        })

    }

    function back() {
        window.history.back();
    }


    layui.use('element', function () {
        var element = layui.element;
    });

    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }
</script>
</body>

</html>
